<template>
  <div class="card">
    <div class="card-header">
      <h2 class="text-xl font-semibold text-gray-900 dark:text-white flex items-center">
        <Settings class="w-6 h-6 mr-2 text-blue-600 dark:text-blue-400" />
        {{ t('components.control_panel.title') }}
      </h2>
    </div>
    
    <!-- 等级选择 -->
    <div class="space-y-4">
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-5 gap-3 md:gap-4">
        <div v-for="level in bandwidthStore.levels" 
             :key="level"
             class="relative">
          <input
            :id="`level-${level}`"
            v-model="selectedLevel"
            :value="level"
            type="radio"
            class="sr-only"
            :disabled="bandwidthStore.isLoading"
          />
          <label
            :for="`level-${level}`"
            class="level-card"
            :class="getLevelCardClass(level)"
            @click="selectLevel(level)"
          >
            <div class="flex flex-col items-center text-center">
              <!-- 等级图标 -->
              <div class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 rounded-full mb-2 md:mb-3 flex items-center justify-center"
                   :style="{ backgroundColor: `${getLevelInfo(level)?.color}20` }">
                <component :is="getLevelIcon(level)" 
                          class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6" 
                          :style="{ color: getLevelInfo(level)?.color }" />
              </div>
              
              <!-- 等级名称 -->
              <h3 class="text-sm sm:text-base font-semibold text-gray-900 dark:text-white mb-1">
                {{ getLocalizedLevelName(level) }}
              </h3>
              
              <!-- 等级描述 -->
              <p class="text-xs text-gray-500 dark:text-gray-400 mb-2 hidden sm:block">
                {{ getLocalizedLevelDescription(level) }}
              </p>
              
              <!-- 速度指示 -->
              <div class="flex items-center text-xs text-gray-600 dark:text-gray-400">
                <Zap class="w-3 h-3 mr-1" />
                <span class="font-medium">{{ getLevelInfo(level)?.speed_mbps || 0 }}</span>
                <span class="hidden sm:inline ml-1">Mbps</span>
              </div>
            </div>
            
            <!-- 选中指示器 -->
            <div v-if="selectedLevel === level" 
                 class="absolute top-2 right-2 w-6 h-6 rounded-full flex items-center justify-center"
                 :style="{ backgroundColor: getLevelInfo(level)?.color }">
              <Check class="w-4 h-4 text-white" />
            </div>
          </label>
        </div>
      </div>
      
      <!-- 控制按钮 -->
      <div class="flex items-center justify-center space-x-4 pt-6">
        <button
          v-if="!bandwidthStore.isRunning"
          @click="startBandwidth"
          :disabled="bandwidthStore.isLoading || selectedLevel === 'off'"
          class="btn btn-primary btn-lg flex items-center space-x-2"
        >
          <Play class="w-5 h-5" />
          <span>{{ t('components.control_panel.start_bandwidth') }}</span>
        </button>
        
        <button
          v-else
          @click="stopBandwidth"
          :disabled="bandwidthStore.isLoading"
          class="btn btn-danger btn-lg flex items-center space-x-2"
        >
          <Square class="w-5 h-5" />
          <span>{{ t('components.control_panel.stop_bandwidth') }}</span>
        </button>
        
        <!-- 加载指示器 -->
        <div v-if="bandwidthStore.isLoading" 
             class="flex items-center space-x-2 text-gray-600 dark:text-gray-400">
          <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
          <span class="text-sm">{{ t('components.control_panel.processing') }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Settings, Play, Square, Zap, Check, Power, Gauge, TrendingUp, AlertTriangle, Activity, BarChart3 } from 'lucide-vue-next'
import { useBandwidthStore } from '@/stores/bandwidth'
import { BandwidthLevel } from '@/types'
import { useI18n } from '@/composables/useI18n'

const bandwidthStore = useBandwidthStore()
const selectedLevel = ref<BandwidthLevel>(BandwidthLevel.Off)
const { t } = useI18n()

const getLevelInfo = (level: BandwidthLevel) => {
  return bandwidthStore.levelInfos[level]
}

// 获取国际化的等级名称
const getLocalizedLevelName = (level: BandwidthLevel): string => {
  const levelKey = level.toLowerCase()
  return t(`levels.${levelKey}`)
}

// 获取国际化的等级描述
const getLocalizedLevelDescription = (level: BandwidthLevel): string => {
  const levelKey = level.toLowerCase()
  return t(`level_descriptions.${levelKey}`)
}

const getLevelIcon = (level: BandwidthLevel) => {
  switch (level) {
    case BandwidthLevel.Off:
      return Power
    case BandwidthLevel.Micro:
      return Gauge
    case BandwidthLevel.Mini:
      return TrendingUp
    case BandwidthLevel.Low:
      return Activity
    case BandwidthLevel.Medium:
      return BarChart3
    case BandwidthLevel.High:
      return AlertTriangle
    case BandwidthLevel.Turbo:
      return Zap
    case BandwidthLevel.Ultra:
      return Play
    case BandwidthLevel.Extreme:
      return Square
    default:
      return Power
  }
}

const getLevelCardClass = (level: BandwidthLevel) => {
  const baseClass = 'block w-full p-4 border-2 rounded-xl cursor-pointer transition-all duration-200 hover:shadow-md'
  
  if (selectedLevel.value === level) {
    return `${baseClass} border-current shadow-lg transform scale-105`
  }
  
  return `${baseClass} border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500`
}

const selectLevel = (level: BandwidthLevel) => {
  if (!bandwidthStore.isLoading) {
    selectedLevel.value = level
  }
}

const startBandwidth = async () => {
  if (selectedLevel.value !== BandwidthLevel.Off) {
    await bandwidthStore.startBandwidthConsumption(selectedLevel.value)
  }
}

const stopBandwidth = async () => {
  await bandwidthStore.stopBandwidthConsumption()
  selectedLevel.value = BandwidthLevel.Off
}
</script>

<style scoped>
.level-card {
  position: relative;
  transition: all 0.2s ease-in-out;
}

.level-card:hover {
  transform: translateY(-2px);
}
</style> 